.footer {
  position: relative;

  height: 20px;
  padding: 10px 15px;

  text-align: center;

  color: #777;
}

.footer::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  overflow: hidden;

  height: 50px;

  content: '';

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
  0 8px 0 -3px #f6f6f6,
  0 9px 1px -3px rgba(0, 0, 0, 0.2),
  0 16px 0 -6px #f6f6f6,
  0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.footerIsHidden {
  display: none;
}

.footerHasCompleted {
  composes: footer;
}

.counter {
  float: left;

  text-align: left;
}

.clearButton {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;

  position: relative;

  display: none;
  float: right;

  margin: 0;
  padding: 0;

  cursor: pointer;
  vertical-align: baseline;

  color: inherit;
  border: none;
  outline: none;
  background: transparent;
}

.clearButton:hover {
  text-decoration: underline;
}

.footerHasCompleted .clearButton {
  display: inline;
}
